<template>
  <a-layout id="components-layout-demo-responsive">
    <!-- collapsible  -->
    <a-layout-sider breakpoint="lg" collapsedWidth="0">
      <!-- @collapse="onCollapse"
      @breakpoint="onBreakpoint"-->
      <div class="logo" />
        <!-- <h2 style="color:#fff;line-height: 2;margin: 0;">博客后台</h2> -->
      <a-menu theme="dark" :defaultSelectedKeys="['1']" mode="inline">
        <!-- @click="clickMenu"  -->
        <template v-for="(item,index) in navList">
          <a-sub-menu v-if="item.children&&item.children.length>1" :key="index">
            <span >
              <!-- <a-icon :type="item.type" /> -->
              <span>{{item.mate}}</span>
            </span>
            <a-menu-item v-for="child in item.children" :key="child.name">
              <router-link :to="{name:child.name}">
                <!-- <a-icon :type="child.type" /> -->
                <span>{{child.meta.title}}</span>
              </router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item v-else-if="!item.children" :key="item.name">
            <router-link :to="{name:item.name}">
              <!-- <a-icon :type="item.type" /> -->
              <span>{{item.meta.title}}</span>
            </router-link>
          </a-menu-item>
          
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header
        :style="{background: '#fff'  ,padding: 0 ,'line-height':'45px',height:'45px'}"
      >
        <a-row style="width:300px;float:right ; text-align: right;">
          <a-col :span="24">
            <a-row>
              <a-col :span="10">
                <span>
                  管理员:
                  <span>欢迎回来</span>
                </span>
              </a-col>
              <a-col :span="8">
                <a-dropdown>
                  <a class="ant-dropdown-link" href="#">
                    设置
                    <!-- <a-icon type="down" /> -->
                  </a>
                  <a-menu >
                    <a-menu-item>
                      <a href="javascript:;">菜单1</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a href="javascript:;">菜单2</a>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </a-col>
              <a-col :span="6">
                <a-button @click="outLogin">退出</a-button>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-layout-header>
      <a-layout-content class="bre-height100" :style="{ margin: '10px 10px 0' }">
        <div :style="{ padding: '0px', background: '#fff', height: '100%' }">
          <router-view class="bre-height100"  />
        </div>
      </a-layout-content>
      <!-- <a-layout-footer style="textAlign: center;padding: 5px;">breakon 博客</a-layout-footer> -->
    </a-layout>
  </a-layout>
</template>
<script>
import nav from "@/adminCore/router/nav";
export default {
  data() {
    return {
      navList: nav.NewNav()
    };
  }, 
  methods: { 
    outLogin() {
      this.$store.commit("setIsLogin", { state: false });
      this.$router.replace("/login");
    }
  }
};
</script>

<style scope >
/* #components-layout-demo-responsive .logo {
  height: 32px;
  background: rgba(255,255,255,.2);
  margin: 16px;
} */
aside .ant-layout-sider-zero-width-trigger {
  top: 0;
}
#components-layout-demo-responsive {
  min-height: 100vh;
}
.components-layout-demo-responsive /deep/ .ant-layout-sider-zero-width-trigger {
  top: 8px;
  width: 20px;
  right: -20px;
  background: #a9beca;
  box-shadow: 0px 2px 5px 1px rgb(202, 204, 204);
}
</style>

 